<template>
    <div class="main-home-layout">
        <div class="menu-container">
            <ARow
                v-for="(itemMenu, itemIndex) in ownMenus"
                :key="itemIndex"
                type="flex"
                :gutter="20"
            >
                <template v-for="item in itemMenu">
                    <ACol
                        :key="item.sort"
                        class="menus-item"
                        :span="item.span"
                        @click="gotoPage(item)"
                    >
                        <span class="bg-container">{{ item.title }}</span>
                    </ACol>
                </template>
            </ARow>
        </div>
    </div>
</template>

<script>
import { mapActions } from "vuex";
import { menus } from "./config";
export default {
    data() {
        return {
            col: 4,
        };
    },
    computed: {
        ownMenus() {
            let arr = [];
            if (Array.isArray(menus) && menus.length) {
                arr = menus.reduce((acc, curr, index) => {
                    let _curr = {
                        ...curr,
                        span: 24 / this.col,
                    };
                    if (index % this.col === 0) acc.push([]);
                    acc[Math.floor(index / this.col)].push(_curr);
                    return acc;
                }, []);
            }
            return arr;
        },
    },
    methods: {
        ...mapActions("app", ["changeMainName"]),
        gotoPage({ route, title }) {
            if (!route) return;
            // if (!this.$checkAuth(route)) return this.$message.error("您暂无权限");
            this.changeMainName({ route, title }).then((name) => {
                this.$router.push({
                    name,
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.main-home-layout {
    width: 100%;
    height: 100%;
    position: relative;
    background: url("@/assets/home/home-bg.png") no-repeat;
    background-size: 100% 100%;

    .menu-container {
        width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .ant-row-flex {
            margin-bottom: 20px;

            .menus-item {
                min-height: 20vh;
                background: url("@/assets/home/menuItem.png") no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                border-radius: 10px;
                color: #003567;
                margin: auto;
                padding: 5px;
                overflow: hidden;
                transition: 0.3s;
                text-shadow: 1px 1px 12px rgb(111 242 247);
                text-transform: none;
                font-weight: 700;
                // color: #ffffff;
                border: 2px solid #29446f;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>
